<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>试卷</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

</head>
<body>

<nav th:replace="teacher/_fragments :: menu(4)" class="ui inverted  segment">
    <div class="ui container">
        <div class="ui inverted secondary menu">
            <h2 class="ui teal header item">CUMT</h2>
            <h3 class="ui teal header item">在线答题系统</h3>
            <a href="#" class="  item ">章节</a>
            <a href="#" class=" item ">知识点</a>
            <a href="#" class=" item ">题目</a>
            <a href="#" class="active item ">试卷</a>
            <a href="#" class=" item ">成绩</a>

            <div class="right menu   ">
                <div class="ui dropdown item">
                    <div class="text">
                        <!--                        <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">-->
                        Zhaohaihang
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

<div class="ui  container">
    <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
        <i class="close icon "></i>
        <div class="header">提示：</div>
        <P th:text="${message}">操作成功</P>
    </div>

    <div  class="ui secondary segment form">
        <input type="hidden" name="page">
        <div class=" three fields">
            <div class=" required field">
                <div class="ui labeled input">
                    <div class="ui label">名称</div>
                    <input id="paper-name" name="paperName" type="text" placeholder="试卷名称">
                </div>
            </div>

            <div class=" required field">
                <div class="ui left labeled action  input">
                    <div class="ui   compact  teal basic label">创建人</div>
                    <div class="ui fluid selection   dropdown ">
                        <input type="hidden" name="teacherId"  >
                        <i class="dropdown icon"></i>
                        <div class=" default text ">创建人</div>
                        <div class="menu">
                            <div  th:each="teacher : ${teachers}"  class="item"  data-value="1" th:data-value="${teacher.id}" th:text="${teacher.name}">错误日志</div>
                            <!--                            <div class="item" data-value="1">刘老师</div>-->
                            <!--                            <div class="item" data-value="2">张老师</div>-->
                        </div>
                    </div>
                </div>
            </div>

            <div class="field">
                <button  id ="clear-btn" class="ui  button">清空</button>
                <button type="button" id="search-btn" class="ui  orange basic button"><i class="search icon"></i>搜索</button>
            </div>
        </div>
    </div>

    <div id="table-container"  class="">
        <table th:fragment="paperList" class="ui celled compact teal table">
            <thead>
            <tr>
                <th>序号</th>
                <th>id</th>
                <th>试卷名</th>
                <th>创建人</th>
                <th>接收年级</th>
                <th>题目数</th>
                <th>总分</th>
                <th>开始时间</th>
                <th>结束时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="paper,iterStat : ${page.content}">
                <td th:text="${iterStat.count}">1</td>
                <td th:text="${paper.id}">124</td>
                <td th:text="${paper.name}">第一章练习题</td>
                <td th:text="${paper.teacher.name}">刘老师</td>
                <td th:text="${paper.grade}">2019级</td>
                <td th:text="${paper.totalQue}">25</td>
                <td th:text="${paper.totalScore}">100</td>
                <td th:text="${paper.startTime}">2019-12-12 12:12</td>
                <td th:text="${paper.endTime}">2019-12-12 12:12</td>
                <td ><span class="ui label" th:text="${paper.status}" th:classappend="${paper.status} eq '正在进行' ? 'green' : ' red '">正在进行</span></td>
                <td>
                    <a href="#" th:href="@{/teacher/tea-paper/{id}/question-input(id=${paper.id})}" class="ui mini orange basic button"
                       th:classappend="${session.teacher.id} eq ${paper.teacher.id} ? '' : ' disabled '">题目</a>
                    <a href="#" th:href="@{/teacher/tea-paper/{id}/input(id=${paper.id})}" class="ui mini orange basic button"
                       th:classappend="${session.teacher.id} eq ${paper.teacher.id} ? '' : ' disabled '">编辑</a>
                    <a href="#" th:href="@{/teacher/tea-paper/{id}/delete(id=${paper.id})}" class="ui mini red basic button"
                       th:classappend="${session.teacher.id} eq ${paper.teacher.id} ? '' : ' disabled '">删除</a>
                </td>
            </tr>

            </tbody>
            <tfoot>
            <tr>
                <th colspan="12">
                    <div class="ui  mini  pagination menu" th:if="${page.totalPages}>1">
                        <a href="#" onclick="page(this)" th:attr="data-page=${page.number}-1" class=" item" th:unless="${page.first}">上一页</a>
                        <a href="#" onclick="page(this)" th:attr="data-page=${page.number}+1" class=" item" th:unless="${page.last}">下一页</a>
                    </div>
                    <a href="#" th:href="@{/teacher/tea-paper/input}" class="ui orange right floated mini basic button">新增</a>
                </th>
            </tr>

            </tfoot>
        </table>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

<script>

    $('.ui.dropdown').dropdown({
        on: 'hover'
    });

    $('#clear-btn').on('click', function() {
            $('#paper-name')
                .val("");
            $('.ui.selection.dropdown')
                .dropdown('clear');

    });
    function page(obj) {
        $("[name='page']").val($(obj).data("page"));
        loaddata();
    };

    $("#search-btn").click(function () {
        $("[name='page']").val(0);
        loaddata();
    });
    function loaddata() {
        $("#table-container").load(/*[[@{/teacher/tea-paper/search}]]*/"/teacher/tea-paper/search",{
            paperName : $("[name='paperName']").val(),
            teacherId : $("[name='teacherId']").val(),
            page : $("[name='page']").val()
        });
    };
    //消息提示初始化
    $('.message .close').on('click',function(){
        $(this).closest('.message')
            .transition('fade');
    });


</script>

</body>
</html>